Skip to content

Layout animations for container array'd objects #1081

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 25, 2016
Merged

Conversation

rreusser
Copy link
Contributor

@rreusser rreusser commented Oct 25, 2016

This PR does two things:

  1. a couple one-line tweaks were needed to get layouts to use the new extendLayout function from Improved animation merging for layout and traces #1041
  2. transitions with redraw: true weren't getting redrawn between frames due to a race condition between frame duration and transition duration. If you specify redraw: true, the whole plot now definitely gets redrawn between frames.

Here are animated annotations. Note that they take effect at the end of the transition since smooth annotation transitions are not yet implemented. Also, two-way component binding is not merged into this branch but will work once #1016 is merged.

annotation-animation

@rreusser rreusser changed the title Annotation animation Layout animations for container array'd objects Oct 25, 2016
@rreusser
Copy link
Contributor Author

Added test. Sorry for the messy git history. The linter strikes again.

@etpinard etpinard added bug something broken status: reviewable labels Oct 25, 2016
@etpinard etpinard added this to the v1.19.0 milestone Oct 25, 2016
gd._transitionData._interruptCallbacks.push(function() {
aborted = true;
});

if(frameOpts.redraw) {
gd._transitionData._interruptCallbacks.push(function () {
return Plotly.redraw(gd);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice use of Plotly.redraw


}).catch(fail).then(done);

});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@@ -1510,7 +1512,7 @@ plots.transition = function(gd, data, layout, traces, frameOpts, transitionOpts)
delete layoutUpdate[attr].range;
}

Lib.extendDeepNoArrays(gd.layout, layoutUpdate);
plots.extendLayout(gd.layout, layoutUpdate);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so, this now guarantees that shapes, images and all the other layout array container can also be animated?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unless there are bugs, yes. It iterates through each of those container arrays as a way of bypassing the No in extendDeepNoArrays. The option to force redraw makes non-animatable things Just Work.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great. Let's 🔒 this down by expanding test case

https://github.com/plotly/plotly.js/pull/1081/files#diff-2032f9a39fb6bbc9611ed5ec74c10c19R68

to transition all layout array containers.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lunch, then adding it.

@rreusser
Copy link
Contributor Author

@etpinard Images took just a bit of tweaking to preserve the image element in the join. Flickered excessively otherwise...

cat

@rreusser
Copy link
Contributor Author

@etpinard Added shape and image tests. Ensured that the correct properties are modified or remain the same. Nothing too fancy or profound. Just some sanity checks. Both still need actual animation (i.e. smooth transition) support, but this is a good start.

@etpinard
Copy link
Contributor

amazing 💃

@rreusser rreusser merged commit 000a409 into master Oct 25, 2016
@rreusser rreusser deleted the annotation-animation branch October 25, 2016 22:15
@etpinard
Copy link
Contributor

etpinard commented Nov 3, 2016

@rreusser follow up question on this PR: can frames clear array containers (e.g. annotations) on .animate? See example: http://codepen.io/etpinard/pen/WoNryW

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants